/**
 * 自定义公共message提示框
 */

/**
 * 自定义 提示框( message )组件
 */
var Message = {};
var isShow = false; // 存储message显示状态
var messageVm = null;

Message.install = function (Vue, options) {
  // 参数
  var opt = {
    duration: '2500',
  };
  for (var property in options) {
    opt[property] = options[property];
  }

  Vue.prototype.$message = {
    success:function (tips) {
      renderTips(tips,'success')
    },
    error:function(tips){
      renderTips(tips,'error')
    }
  }

  function renderTips(tips,curType){
    // 如果弹框还在就不出发创建弹框
    if(isShow){
      return;
    }
    // 弹框模板，样式后面根据事先定义好的class和type属性来定义
    const template = '<div :type="type" v-show="show" class="lx-message' + '" ' + '>{{tip}}</div>';
    if(!messageVm){
      // 创建注册一个局部的vue组件，使用Vue.extend({});
      const messageTpl = Vue.extend({
        template: template,
        data: function() {
          return {
            show: isShow,
            tip: tips,
            type: 'lx-message-' + curType,
          };
        },
      });
      messageVm = new messageTpl();
      const tpl = messageVm.$mount().$el;
      document.body.appendChild(tpl);
    }
    // 定义数据
    messageVm.type = 'lx-message-' + curType;
    messageVm.tip = tips;
    // 展示弹框
    messageVm.show = isShow = true;
    setTimeout(function () {
      messageVm.show = isShow = false;
    }, opt.duration)
  }
}

// 向外暴露接口
module.exports = Message;